body,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;

}

body {
    background: lightcoral;
    background-image: url("https://upload.thwiki.cc/8/86/%E9%AC%BC%E5%BD%A2%E5%85%BD%E7%89%88%E5%A4%B4-%E7%99%BD.jpg");
}

/* img{
    width: 100%;
    height: 100%;
} */
.audio-player {
    width: 400px;
    height: 700px;
    background: lightblue;
    position: relative;
    margin: 50px auto;

    .audio-ui {
        width: 400px;
        height: 400px;
        position: relative;

        img {
            transition: all 1.5s;
            width: 100%;
            height: 100%;
            
        }

        /* &:before{
            content: "";
            width: 400px;
            height: 400px;
            background: url("../POP｜CULTURE_2封面.jpg") no-repeat;
            background-size: 100%;
            filter: blur(2px);
            position: absolute;
            
        } */
        .audio-status {


            .details {
                width: 300px;
                height: 100px;
                position: absolute;
                left: 0;
                margin-left: 50px;
                top: 45%;
                color: lightcyan;

                p {
                    span {
                        display: block;
                        width: 100%;
                        text-shadow: 0 2px 10px #C20C0C;
                        font-size: 21px;

                        &:nth-child(1) {
                            font-weight: bold;
                            font-size: 23px;
                        }
                    }
                }

            }

            .jindutiao {
                position: absolute;
                top: 70%;
                margin-left: 50px;

                
            }

            .time {
                position: absolute;
                top: 73%;
                width: 300px;
                margin-left: 50px;
                color: white;

                .time-before {}

                .time-after {
                    margin-left: 220px;
                }
            }

            .controls {
                top: 78%;
                background: transparent;
                position: absolute;
                width: 300px;
                height: 50px;
                margin-left: 50px;
                color: white;
                overflow: hidden;

                .prew {
                    border: 20px solid #C20C0C;
                    border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    text-shadow: 1px 2px 10px black;
                    position: absolute;

                    cursor: pointer;

                    span {
                        position: absolute;
                        font-size: 20px;
                        top: -12px;
                        left: -13px;
                    }

                }

                .play {
                    border: 25px solid #C20C0C;
                    border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    text-shadow: 1px 2px 10px black;
                    margin-left: 120px;
                    top: 0;
                    position: absolute;
                    cursor: pointer;
                    transition: all 1s;

                    span {
                        position: absolute;
                        font-size: 30px;
                        width: 25px;
                        height: 25px;
                        top: -16px;
                        left: -12px;

                        i.fa-play,
                        i.fa-pause {
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            margin: auto;

                            &::before {
                                line-height: 30px;
                            }

                        }
                    }

                }

                .next {

                    border: 20px solid #C20C0C;
                    border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    left: 280px;
                    text-shadow: 1px 2px 10px black;
                    margin-left: 260px;
                    margin-top: 3px;
                    cursor: pointer;

                    span {
                        position: absolute;
                        font-size: 20px;
                        top: 10px;
                        left: 13px;
                        margin-left: 260px;
                    }

                }
            }

            .volume {
                top: 90%;
                margin-left: 50px;
                width: 350px;
                height: 10px;
                position: absolute;
                
                span {
                    color: white;
                    width: 10px;
                    height: 10px;
                    display: block;
                    padding-top: 7px;
                    margin-left: -20px;
                    
                }

                
            }
        }
    }
}

.play-list {
    height: 300px;
    position: relative;
    overflow-y: scroll;
    .playlist-item {
        height: 75px;
        transition: all 0.5s;
        /* position: relative; */
        padding-top: 1px;
        background: white;
        cursor: pointer;
        color: black;

        &.play {
            background: #C20C0C;
            color: white;

            img {
                animation: abc 15s linear infinite;
            }
        }

        &.paused {
            img {
                animation-play-state: paused;
            }
        }

        .zhuanjifengm {
            position: absolute;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            margin-left: 20px;
            margin-top: 10px;



            img {
                border-radius: 50%;
            }
        }

        .singer-name {
            width: 200px;
            height: 50px;
            position: absolute;
            left: 100px;
        }
    }
}

@keyframes abc {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.jindutiao label {
	background: rgba(112, 109, 109,0.6);
	display: block;
	height: 10px;
	overflow: hidden;
	position: relative;
    width: 300px;
    border-radius: 10px;
}
.jindutiao .progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: #C20C0C;
	&::after {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		background: white;
		float: right;
		transition: all 0.5s;
		border-radius: 50%;
	}
}
.jindutiao input {
	line-height: 5px;
	height: 5px;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.volume label {
	background: rgba(112, 109, 109,0.6);
	display: block;
	height: 10px;
	overflow: hidden;
	position: relative;
    width: 300px;
    border-radius: 10px;
}
.volume .progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #C20C0C;
	&::after {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		background: white;
		float: right;
		
		border-radius: 50%;
	}
}
.volume input {
	line-height: 5px;
	height: 5px;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.play-list::-webkit-scrollbar {
    width: 4px;     
    height: 4px;
}
.play-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.play-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
